<template>
    <div class="cart">
        <my-head title="我的购物车"></my-head>
        <van-swipe-cell class="cell" v-for="(l,i) in cartList" :key="i">
            <van-checkbox v-model="l.check"></van-checkbox>
            <van-card
                :num="l.count"
                :price="l.good.price"
                :desc="l.good.type.text"
                :title="l.good.name"
                class="goods-card"
                :thumb="l.good.img"
            />
            <template #right>
                <van-button square text="删除" @click="deleteOne(l,i)" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell>

        <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" >
                 <van-checkbox v-model="checked">全选</van-checkbox>
  <template #tip>
    你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
  </template>
        </van-submit-bar>
    </div>
</template>

<script>
export default {
    data(){
        return {
           checked:false,
        }
    },
    mounted(){
        
    },
    methods:{
        async getCartListAsync(){
            let res = await this.$ajax.getCarts({
                username:this.userInfo.username 
            })
            this.getCartList(res)  // mutations 
        },
        deleteOne(l,i){
            this.$dialog.confirm({
                title: '删除警告',
                message: '你真的要删除吗?',
            })
            .then(async () => {
                let res = await this.$ajax.deleteCart(l.id);
                this.getCartListAsync()
            })
            .catch(() => {
                // on cancel
            });
        },
        onSubmit(){

        },
        onClickEditAddress(){

        }
    }
}
</script>


<style lang="scss" scoped>
.cart{
    width:100%;
    padding:46px  15px;
}
.cell{
    margin-top:10px;
    display: flex;
    align-items: center;
    .delete-button{
        height:100%;
    }
}
</style>